<script setup lang="ts" name="Icon">
import * as ElementPlusIcons from '@element-plus/icons-vue'

import svgList from '@/assets/icons/requireIcons'

const { proxy } = getCurrentInstance();

const iconList = ref<string[]>([]);

function getIconList() {
  iconList.value = Object.keys(ElementPlusIcons);
}

function selected(icon) {
  let oInput = document.createElement('input');
  let iconDom = `<icon-svg icon-name="${icon}"/>`;
  oInput.value = iconDom;
  document.body.appendChild(oInput);
  oInput.select(); // 选择对象
  document.execCommand('Copy'); // 执行浏览器复制命令
  oInput.className = 'oInput';
  oInput.style.display = 'none';
  oInput.remove();
  proxy["$modal"].msgSuccess(`${icon} 图标复制成功！`);
}


getIconList();
</script>

<template>
  <div class="app-container">
    <div class="back-item">
      <h2>el icon 列表</h2>
      <div class="icon-box">
        <div
            class="icon-item"
            v-for="(item) in iconList" :key="item"
            @click="selected(item)"
        >
          <icon-svg :icon-name="item"/>
          <div>
            {{ item }}
          </div>
        </div>
        <div
            class="icon-item"
        >
          <icon-svg icon-name="peoples"/>
          <div>
            button
          </div>
        </div>
      </div>
    </div>
    <div class="back-item">
      <h2>svg icon 列表</h2>
      <div class="icon-box">
        <div
            class="icon-item"
            v-for="(item) in svgList" :key="item"
            @click="selected(item)"
        >
          <icon-svg :icon-name="item"/>
          <div>
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.icon-box {
  display: flex;
  flex-wrap: wrap;

  .icon-item {
    text-align: center;
    width: 130px;
    margin: 10px;
    font-size: 13px;
    /*flex: 1;*/
    .el-icon {
      font-size: 26px;
      margin-bottom: 8px;
    }
  }
}
</style>